<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include::header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>   </h5>
					</div>
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="signupForm">
							<input type="hidden" name="menuIds" id="menuIds">
							<div class="form-group">
								<label class="col-sm-3 control-label">角色名：</label>
								<div class="col-sm-8">
									<input  class="form-control" name="roleName"
										type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">备注：</label>
								<div class="col-sm-8">
									<input  class="form-control" name="remark"
										type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">菜单权限：</label>
								<div class="col-sm-8">
									<div id="menuTree"></div>
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-8 col-sm-offset-3">
									<button type="submit" class="btn btn-primary">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:include="include::footer"></div>
</body>
<script>
	$.validator.setDefaults({
		submitHandler:function(){
		    save();
		}
	})


	$(function(){
	    //查树的数据  进行菜单树的生成
        getTreeData();
        $('#signupForm').validate({
			rules:{
                roleName:'required'
			},
			message:{
                roleName:'角色名不能为空'
			}
		})
	})

	function getTreeData(){
	    $.ajax({
			url:'/sys/menu/tree',
			dataType:'json',
			type:'get',
			success:function(treeData){
				//得到树的数据
                createMenuTree(treeData);
			}
		});
	}
	function createMenuTree(treeData){
		$('#menuTree').jstree({
			core:{
			    data:treeData
			},
			plugins:['checkbox']
		});
	}
	function save(){
	    getSelectMenuIds();
	    $.ajax(
			{
				url:'/sys/role/save',
				data:$('#signupForm').serialize(),
				dataType:'json',
				type:'post',
				success:function(data){
					if(data.code==200){
						//保存成功
						// 关闭弹窗  刷新列表
						parent.reload();
						parent.layer.close(parent.layer.getFrameIndex(window.name));
					}else {
					    //保存失败
                      parent.layer.msg("添加失败,"+data.msg,{icon:2});
					}
				}
			}
		);
	}
	function getSelectMenuIds(){
        var selected = $('#menuTree').jstree(true).get_selected();
		$('#menuIds').val(selected);
	}
</script>
</html>
